import React from 'react';
import { Layout } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Avatar } from 'antd';

const { Header } = Layout;
const CmsHeader = (props: any) => {
  const { flag, toggle } = props;
  return (
    <Header className="layout-header">
      <div>
        {React.createElement(flag ? MenuUnfoldOutlined : MenuFoldOutlined, {
          className: 'trigger',
          onClick: toggle,
        })}
      </div>
      <div>
        <Avatar icon={<UserOutlined />} className="header-avatar" />
        <span>User</span>
      </div>
    </Header>
  );
};

export default CmsHeader;
